<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('api测试')" />
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInRight">
        <div class="row">
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>表单元素 </h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_basic.html#">选项1</a>
                                </li>
                                <li><a href="form_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content" id="app">
                    	<div class="form-horizontal">
                        	<div class="form-group">
                                <label class="col-sm-2 control-label">api地址</label>
                                <div class="col-sm-10 form-inline">
                                    <input name="apiUrl1" id="apiUrl1" type="text" class="form-control" required v-model="apiUrl1">
                                    <input name="apiUrl2" id="apiUrl2" type="text" class="form-control" required v-model="apiUrl2">
                                    <span class="help-block m-b-none">两个输入框内容会被拼成一个地址：{{apiUrl}}</span>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">请求方式</label>

                                <div class="col-sm-10" id="aaa">
                                    <select v-model="requestMethod" class="form-control m-b" name="requestMethod" id="requestMethod">
                                        <option value="GET">GET</option>
                                        <option value="POST">POST</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="form-group">
                                <label class="col-sm-2 control-label">返回结果预测</label>

                                <div class="col-sm-10" id="resultType">
                                    <select v-model="resultType" class="form-control m-b" name="resultType" id="resultType">
                                        <option value="json">json数据</option>
                                        <option value="file">文件(图片/文档/音视频等)</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                      	<form class="form-horizontal" id="form">
                            <div class="form-group">
                                <label class="col-sm-2 control-label">appKey</label>
                                <div class="col-sm-10">
                                    <input v-model="appKey" name="appKey" id="appKey" type="text" class="form-control" required>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">appScrect</label>
                                <div class="col-sm-10">
                                    <input v-model="appScrect" name="appScrect" id="appScrect" type="text" class="form-control" required>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <h5>自定义参数：<a @click="addParam"><i class="fa fa-plus" aria-hidden="true"></i></a></h5>
                            <div class="form-group" v-for="param in params" :id="'param'+param.index">
<!--                                 <div class="col-sm-1"> -->
<!--                                 	<label class="control-label"> -->
<!--                                     	{{param.index}} -->
<!--                                 	</label> -->
<!--                                 </div> -->
                                <label class="col-sm-4">
                                	<input :id="'param'+param.index+'_name'" type="text" class="form-control" v-model="param.name" required>
                                </label>
                                <template v-if="param.type=='normal'">
                                <div class="col-sm-7">
                                    <input :id="'param'+param.index+'_value'" :name="param.name" type="text" class="form-control" required>
                                </div>
                                </template>
                                <template v-if="param.type=='file'">
                                <div class="col-sm-7">
                                    <input :id="'param'+param.index+'_value'" :name="param.name" type="file" class="form-control" required>
                                </div>
                                </template>
                                <div class="col-sm-1">
                                	<label class="control-label">
                                    	<a @click="delParam(param.index)"><i class="fa fa-minus" aria-hidden="true"></i></a>
                                	</label>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                            <div class="form-group">
                                <div class="col-sm-4 col-sm-offset-2">
                                    <button class="btn btn-primary" type="button" @click="submit">提交</button>
<!--                                     <button class="btn btn-white" type="submit">取消</button> -->
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-sm-6">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>返回数据 </h5>
                        <div class="ibox-tools">
                            <a class="collapse-link">
                                <i class="fa fa-chevron-up"></i>
                            </a>
                            <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                                <i class="fa fa-wrench"></i>
                            </a>
                            <ul class="dropdown-menu dropdown-user">
                                <li><a href="form_basic.html#">选项1</a>
                                </li>
                                <li><a href="form_basic.html#">选项2</a>
                                </li>
                            </ul>
                            <a class="close-link">
                                <i class="fa fa-times"></i>
                            </a>
                        </div>
                    </div>
                    <div class="ibox-content">
                    	<textarea id="result" class="form-control" style="height: 100%"></textarea>
                    </div>
                </div>
            </div>
            
        </div>
        
        
    </div>
    <th:block th:include="include :: footer" />
    
    <script th:src="@{/js/vue.min.js}"></script>
    
    <script type="text/javascript">
    $(function(){ 
    	$("#result").height($(window).height()-130);
	}); 
    
    var vm = new Vue({
		el: '#app',
   		data: {
   			resultType: 'json',
   			apiUrl1: 'http://localhost/openapi',
   			apiUrl2: '',
   			appKey: '1hGBBbzU0F',
   			appScrect: 'e9d2b3c9c04109e5ae5ffe8a8697c8c2',
   			requestMethod: 'GET',
   			params: new Array()
   	  	},
   	  	computed: {
   	  		apiUrl: function () {
   	  	      return this.apiUrl1 + this.apiUrl2
   	     	}
   	  	},
   	 	methods: {
   	  		addParam: function(){
   	  			var that = this;
	   	  		layer.open({
	   	  		  type: 1,
	   	  		  anim: 2,
	   	  		  shadeClose: true, //开启遮罩关闭
	   	  		  btn: ['确认', '取消'],
	   	  		  content: '<div style="padding:10px"><select class="form-control m-b" id="choseParamType"><option value="normal">普通参数</option><option value="file">文件</option></select></div>'
	   	  		  ,yes: function(index, layero){
	   	  			  	var addParamType = $("#choseParamType").val();
		   	  			var i = 0;
	   	  			  	if(that.params.length>0){
		   	  				i = that.params[that.params.length-1].index+1;
		   	  			}
	   	  			  	that.params.push({
		   	  				"index":i,
	   	  					"name":null,
	   	  					"value":null,
	   	  					"type":addParamType
	   	  				});
		   	  			layer.close(index);
	   	  		  }
	   	  		
	   	  		});
	     	},
	     	delParam: function(i){
	     		this.params.splice(i, 1);
	     	},
	     	submit: function(){
	     		var that = this;
	     		if(that.requestMethod=="GET"){
			        if(that.resultType=="json"){
			        	$.ajax({
				        	url: that.apiUrl,
							type: "GET",
				            data:$('#form').serialize(), // "id=asdasd&s=000&name=1233"
				            success:function (data,status,xhr) {
								$("#result").html(JSON.stringify(data, null, "\t"))
							},
							error:function (data,status,xhr) {
								$("#result").html(JSON.stringify(data, null, "\t"))
							}
				        })
			        }else{
			        	$('#form').attr("action",that.apiUrl);
			        	$('#form').submit();
			        }
	     		}else{
	     			var formData = new FormData(document.querySelector("#form"));
			        $.ajax({
			        	url: that.apiUrl,
						type: that.requestMethod,
			            data: formData,
						cache: false,        // 不缓存数据
						processData: false,  // 不处理数据
						contentType: false,   // 不设置内容类型
						success:function (data,status,xhr) {
// 							/api/test/fileUpload	
							console.log(data);
							console.log(status);
							console.log(xhr);
							$("#result").html(JSON.stringify(data, null, "\t"))
						},
						error:function (data,status,xhr) {
							console.log(data);
							console.log(status);
							console.log(xhr);
							$("#result").html(JSON.stringify(data, null, "\t"))
						}
					});
	     		}
	     	}
   	  	}
   	})
    
    </script>
</body>
</html>
